<template>
  <div class="login-container">
    <div class="login-box">
      <h2>子应用登录</h2>
      <div class="form-item">
        <label>用户名：</label>
        <input type="text" v-model="username" placeholder="请输入用户名" />
      </div>
      <div class="form-item">
        <label>密码：</label>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>
      <div class="form-item">
        <button @click="handleLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref('');
const password = ref('');

const handleLogin = () => {
  if (username.value && password.value) {
    // 简单模拟登录成功
    const token = `sub_${username.value}_${Date.now()}`;
    localStorage.setItem('subAppToken', token);
    localStorage.setItem('subAppUsername', username.value);
    
    // 登录成功后跳转到首页
    router.push('/');
  } else {
    alert('请输入用户名和密码');
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.login-box {
  width: 350px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.form-item {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #1565c0;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
</style>